<style>

</style>

<template>
  <div id="home">
    <span v-show="cafesLoadStatus == 1">Loading</span>
    <span v-show="cafesLoadStatus == 2">Cafes loaded successfully!</span>
    <span v-show="cafesLoadStatus == 3">Cafes loaded unsuccessfully!</span>


    <!-- <ul>
      <li v-for="cafe in cafes">{{ cafe.name }}</li>
   </ul> -->
  </div>
</template>

<script>
    export default {
        // 在组件创建之后绑定的声明周期钩子 created() 会被调用
        created() {
            this.$store.dispatch('loadCafes'); //调用modules/cafes.js中的 loadCafes
        },
        /**
         * 定义组件的计算属性
         */
        computed: {
            // 获取 cafes 加载状态
            cafesLoadStatus() {
                return this.$store.getters.getCafesLoadStatus;
            },
            // 获取 cafes
            cafes() {
                return this.$store.getters.getCafes;
            }
        },
    }
</script>